<template>
	<view class="page">
		<view class="header">
			
			<view class="header-text" @click="handleSelect()">
				{{menuList[selectIndex].menuName===undefined ? "政务云":menuList[selectIndex].menuName}}
			</view>
		</view>
		<view class="body">
			<scroll-view scroll-y="true" >
				<view class="slu-info-box">
					<image src="/static/backgrounds/slu-bg.png" mode="aspectFill" ></image>
					<view  class="slu-title" >
						{{menuList[selectIndex].pageTitle}}
					</view>
					<view  class="slu-describe">
						{{menuList[selectIndex].subTitle}}
					</view>
				</view>
				
				<view class="slu-list" >
					<view class="slu-item" v-for="(item,index) in solutionList[selectIndex+1]" :key="index">
						<uni-section :title="item.name" title-font-size="40rpx" :bold="false" type="line">
							<view class="main-info">
								<view class="info-item">
									{{item.cpuModle}}
								</view>
								<view class="info-item">
									{{item.numberOfCores}}核{{item.memoryCapacity}}G
								</view>
								<view class="info-item">
									{{item.diskCapacity}}G系统盘
								</view>
								<view class="info-item">
									{{item.bandwidth}}Mbit/s带宽
								</view>
								<view class="application">
									<view class="application-title">
										适用场景:
									</view>
									
									
									{{item.challenge}}
									
									
								</view>
								<view class="price">
									<view class="price-box">
										<view class="price-num">
											￥ {{item.cpuPrice+item.databasesPrice+item.diskPrice+item.gpuPrice
											+item.memoryPrice+item.nicPrice
											}}
										</view>
										<view class="pre-month">
											/月
										</view>
									</view>
									
								</view>
								
							</view>
							<uni-collapse  ref="mycll" >
								<uni-collapse-item title="详细信息" @click.native="handleHeight">
									<view class="item-detail-box">
										<view class="collapse-item">
											<view class="collapse-item-title">
												<text>CPU:</text>
												<view class="price">
													￥ {{item.cpuPrice}}
												</view>
											</view>
											<view class="">
												型号：{{item.cpuModle}}
											</view>
											<view class="">
												主频：{{item.clockSpeed}}GHz
											</view>
											<view class="">
												核心数：{{item.numberOfCores}}
											</view>
										</view>
										<view class="collapse-item">
											<view class="collapse-item-title">
												<text>内存:</text>
												<view class="price">
													￥ {{item.memoryPrice}}
												</view>
											</view>
											<view class="">
												容量：{{item.memoryCapacity}}
											</view>
						
											
										</view>
										
										<view class="collapse-item">
											<view class="collapse-item-title">
												<text>网络:</text>
												<view class="price">
													￥ {{item.nicPrice}}
												</view>
											</view>
											<view class="">
												带宽：{{item.bandwidth}}
											</view>
											
											<view class="">
												流量：{{item.netTraffic}}G
											</view>

										</view><view class="collapse-item">
											<view class="collapse-item-title">
												<text>数据库:</text>
												<view class="price">
													￥ {{item.databasesPrice}}
												</view>
											</view>
											<view class="">
												型号：{{item.databasesRemark}}
											</view>
											
											
											
										</view>
										<view class="collapse-item">
											<view class="collapse-item-title">
												<text>硬盘:</text>
												<view class="price">
													￥ {{item.diskPrice}}
												</view>
											</view>
											<view class="">
												容量：{{item.diskCapacity}}
											</view>
										
											<view class="">
												每秒读写：{{item.iops}}
											</view>
										
											<view class="">
												吞吐率：{{item.throughput}}
											</view>
											
											
											
										</view>、
										
										<view class="collapse-item">
											<view class="collapse-item-title">
												<text>支持:</text>
												<view class="price">
													￥ {{item.supportPrice}}
												</view>
											</view>
											<view class="">
												响应时间：{{item.response}}h
											</view>
											
											<view class="">
												到场时间：{{item.present}}h
											</view>
										
											
											
										</view>
										<view class="collapse-item">
											<view class="collapse-item-title">
												<text>短信:</text>
												<view class="price">
													￥ {{item.messagePrice}}
												</view>
											</view>
											<view class="">
												短信数量：{{item.amount}}条
											</view>
		
											<view class="">
												发送速度：{{item.speed}}条/分钟
											</view>
											
											
										</view>
										<view class="collapse-item">
											<view class="collapse-item-title">
												<text>操作系统:</text>
												<view class="price">
													￥ 0.00
												</view>
											</view>
											<view class="">
												型号：{{item.osName}}
											</view>

											<view class="">
												版本：{{item.osVersion}}
											</view>

											
											
										</view>
										<view class="collapse-item">
											<view class="collapse-item-title">
												<text>显卡:</text>
												<view class="price">
													￥ {{item.gpuPrice}}
												</view>
											</view>
											<view class="">
												型号：{{item.gpuModle}}
											</view>

											<view class="">
												显存：{{item.gpuMemory}}G
											</view>
										</view>
										
									</view>
						
								</uni-collapse-item>
							</uni-collapse>
							
						</uni-section>
						
					</view>
					
				</view>
			</scroll-view>
				
			
		</view>
		
		<view class="">
			<uni-popup ref="cloudSelect" background-color="none" class="popup"  mask-background-color="none">
							<view class="popup-top">
								
							</view>
							<view class="popup-content" 
							 @click="selectMenu(index,item)"   
							 :class="selectIndex===index ? 'popup-content-active':''"
							 v-for="(item,index) in menuList" :key="index">
								<view>{{item.menuName}}</view>
								
							
							</view>
						</uni-popup>
			
			
		</view>
			
		
		
	</view>
</template>

<script>
	export default {
		onShow() {
			uni.request({
				url: this.baseurl+'/solutionMenu',
				method: 'GET',
				data: {},
				success: res => {
					
					this.menuList=res.data
					
				},
				fail: () => {},
				complete: () => {}
			});
			uni.request({
				url: this.baseurl+'/solution',
				method: 'GET',
				data: {},
				success: res => {
					var nodeIds = {};
					for(let d of res.data){
						
						if(nodeIds[d.solutionParent]==null){
							nodeIds[d.solutionParent]=[];
						}
						nodeIds[d.solutionParent].push(d);
					}
					this.solutionList=nodeIds;
					console.log(this.solutionList);
				},
				fail: () => {},
				complete: () => {}
			});
		},
		data() {
			return {
				baseurl:'http://DESKTOP-WZH:8848',
				// baseurl:'http://127.0.0.1:4523/m1/3092566-0-default',
				solutionList:null,
				menuList:null,
				selectIndex:0,
			};
		},
		methods:{
			handleSelect(){
				// console.log(this.menuList);
				this.$refs.cloudSelect.open('top')
			},
			selectMenu(index,item){
				this.selectIndex=index
				this.$refs.cloudSelect.close()
			},
			handleHeight() {
	

				
			}
		}
	}
</script>

<style lang="scss">

.header{
	display: flex;
	align-items: center; 
	height: 100rpx;
	.header-text{
		padding-left: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 40rpx;
		font-weight: bold;
		border-left: solid firebrick 10rpx;
	}
}
.body{
	// height: 1200rpx;
	.slu-info-box{
	position: relative;
	
		.slu-title{
			left: 100rpx;
			top: 100rpx;
			width: 700rpx;
			height: 100rpx;
			z-index: 10;
			color: white;
			position: absolute;
			font-size: 60rpx;
			font-weight: bold;
		}
		.slu-describe{
			left: 100rpx;
			top: 300rpx;
			width: 500rpx;
			height: 300rpx;
			z-index: 10;
			color: white;
			position: absolute;
		}
		
		image{
			height: 700rpx;
			width: 100%;
			position: absolute;
		}
	}
	
	.slu-item{
		top: 700rpx;
		position: relative;
		// height: 400rpx;
	}
	scroll-view{
		height: 1300rpx;
	}
	

	
}
.popup-top{
		height: 100rpx;

	}
	
	.popup-content{
		height: 70rpx;
		font-size: 30rpx;
		padding-left: 20rpx;
		background-color: white;
		line-height: 70rpx;
	}
	.popup-content-active{
		background-color: darkred;
		color: white;
	}
	
.collapse-item{
	margin-bottom: 20rpx;
	border-bottom: solid black 1rpx;

	.collapse-item-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		height: 100rpx;
		
		
		text{
		font-size: 35rpx;
		font-weight: bold;
		}
		
	}
	
	view{
		font-size: 30rpx;
	}
	
}
.price-num{
	top: 100rpx;
	font-size: 40rpx;
	font-weight: bold;
	position: relative;

	}
.pre-month{
	top: 120rpx;
	font-size: 28rpx;
	font-weight: none;
	position: relative;
}
.price-box{

}

.main-info{
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.25fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	font-size: 30rpx;
	border-top: solid 1rpx darkgray;
	text-align: center;
	.info-item{
		border-left:solid 1rpx darkgray ;
		border-bottom: solid 1rpx darkgray;
		  display: flex;  
		  justify-content: center;
		  align-items:center;
	}
	
	.application{
		border-left:solid 1rpx darkgray ;
		border-bottom: solid 1rpx darkgray;
		text-align: left;
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 5;
	}
	.price{
		grid-column-start: 3;
		grid-column-end: 4;
		grid-row-start: 1;
		grid-row-end: 5;
		height: 300rpx;
		border-bottom: solid 1rpx darkgray;
		border-left:solid 1rpx darkgray ;
		color: orangered;
		
		
		
		// grid-template-columns: 1fr;
		// grid-template-rows: 1fr 1fr;
	}
	
}

.application-title{

}

</style>
